<template>
  <div class="map">
    <div class="canvas" ref="chartsDOM"></div>
  </div>


</template>

<script >
import * as echarts from 'echarts';
// import GetqujingMap from '@/api/MapApi/GetqujingMap'   //获取远程地图数据 需联网
import axios from 'axios'


  export default {
    name:'county_profile_mode_Map',
    props:{
      map_data:{
        type: [String, Object],
        default:'曲靖市'    //若没有接收到父组件的数据则使用默认曲靖市地图
      }
    },
    data(){
      return{
        MapChart:null,  //地图对象
        //地图级别
        level:0,    //0表示市级，1表示县级
        //每个地图板块颜色
        townColor:{},
        //作答弹窗状态
        answer_pop: false,
        //单击区域的地点名称
        mapname:null,
        //输入文本
        input_text:null,
        input_color:'',
        //成绩
        grade:0,
        //区段分数
        fraction:10,
        map_name_topic:this.map_data,   //训练数据
      }
    },
    components: {},
    mounted() {
      this.initChart();  //绘制地图图表
    },
    computed:{
      examine_status(){
        return this.$store.state.examine_status
      }
    },
    watch:{
      map_data(newVal){
        this.map_name_topic = newVal
        this.drawCityMap()
      }
    },
    methods:{
      //初始化加载地图
      initChart(){
        //初始化地图对象
        this.MapChart = echarts.init(this.$refs['chartsDOM']);
        // console.log('数据：',this.map_name_topic.belongTo,this.map_name_topic.height_light)
        this.drawCityMap()
        // console.log('父亲组建的数据：',this.map_name_topic)
      },

      //初始化绘制曲靖市地图
      drawCityMap(){
        //获取本地的地图json数据
        let json_map =  '/map_json/曲靖市.json'
        const provinceMap = axios.get(json_map);
        // console.log('曲靖地图对象：',qujingMap)
        //显示loading动画
        this.MapChart.showLoading()
        // console.log('qujingmap:',qujingMap)
        //根据获取的地图数据绘制地图
        provinceMap.then(res => {
          //重构不同颜色
          let dataArray = this.assignMapData(res,this.map_name_topic.belongTo)
          //获取数据后关闭loading动画
          this.MapChart.hideLoading();
          //注册地图
          echarts.registerMap('qj',res.data);
          //设置地图层级为0代表市级
          // this.level = 0;
          const option = {
            title:{
              text:'训练界面—县区',
              left: '10vw', // 确保标题可见
              top:'10vh',
              textStyle: {
                color: '#40e0d0', // 修改为你想要的颜色（如 '#ff0000' 表示红色）
                // fontSize: 16,  // 可选：调整字体大小
                // fontWeight: 'bold' // 可选：调整字体粗细
              }
            },
            tooltip:{
              show:false    //不显示提示信息
            },   //配置提示框
            series: [
              {
                name: '曲靖地图',
                type:'map',
                map:'qj',
                roam:false,  //允许缩放平移
                label:{
                  color:'#FFFFFF',
                  show:false
                },
                itemStyle:{
                  borderColor:'rgb(0,0,0)',
                  shadowColor:'#09ec14',
                  // shadowColor:'rgb(0,0,0)',
                  shadowBlur: 5,
                },
                data:dataArray,
                //鼠标悬停配置
                emphasis:{
                  label:{
                    show:false
                  },
                  itemStyle:{
                    areaColor: '#FF0000', //悬停颜色
                    shadowColor:'#000000',
                    shadowBlur:30,
                  }
                },
                selectedMode:false
              }
            ],
          };
          this.MapChart.setOption(option);
          }).catch(error => {
            console.error('地图数据加载错误:', error);
            this.MapChart.hideLoading();
        });
      },


      //  生成随机颜色
      getRandomColor(){
        return `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6,'0')}`;
      },
      //重构乡镇数据
      assignMapData(res,map_name){
          //为地图添加随机颜色
          let dataArray=[]   //地图板块数据
          for(let i=0;i<res.data.features.length;i++){
              let itemData =res.data.features[i];  //遍历板块数据
                if(itemData.properties.name === map_name){
                  //为map_name赋值红色
                  dataArray.push({name:itemData.properties.name,itemStyle:{areaColor: '#FF0000', shadowColor:'#000000', shadowBlur:30,}})//悬停颜色
                }else{
                  //重构数据格式
                  dataArray.push({name:itemData.properties.name})
                }
             }
          return dataArray
      },
      //获取曲靖市各县区数据
      get_county_data(res){
        // console.log('res:',res)
        let county_data= []    //地图板块数据
          for(let i=0;i<res.data.features.length;i++){
           let county_name =res.data.features[i].properties.name;  //遍历板块数据
            //重构数据格式，添加随机颜色
           county_data.push(county_name)
          }
          // console.log('county_data:',county_data)
          return county_data
      },


      //鼠标左键事件-显示弹窗
      ShowPopClick(params){
        // console.log('单击地点：',params.name)
        //地点名传到data
        this.mapname = params.name
        //开启弹窗
        this.answer_pop = true
        this.$store.commit('setanswer_pop',this.answer_pop)
        //单击区域传回作答页面
        this.$store.commit('setanswer_text',this.mapname)
      },

      //鼠标左键-进入乡镇级地图
      ToCountyMapClick(params){
        // console.log('点击了地图：',params.name)
        // console.log('地图对象：',params)
        //判断地图层级
        if( this.level === 0){
          //当前处于市级地图，点击下钻
          //判断是否点击到地图元素
          if(params.name){
            console.log('当前处于市级地图：',params.name)
            //回收县区级地图
            // this.MapChart.dispos()
            //绘制所点击的地图
            this.drawCountyMap(params.name);
          }
        //判断是否处于县区级地图
        }else if( this.level === 1){
          this.backToCity()
        }
      },


      backToCity(){
        // console.log('点击了返回')
        this.drawCityMap()
      },





    }
}
</script>

<!--<style scoped>-->
<!--  @import url('@/assets/ecss/ExamineMapCSS.ecss');-->
<!--</style>-->
<style scoped>
  .map{
     width: 35vw;
    height: 78vh;
    /*background-color: red;*/
    box-sizing: border-box;
  }
  .canvas{
     width: 35vw;
    height: 78vh;
    /*background-color: greenyellow;*/
    position: absolute;
    /*left: calc(50% - 25vw);*/
    overflow: hidden;
    box-sizing: border-box;
    border: 1px black dashed;
    border-radius: 10px;
}

</style>

